<template>
	<view>
		<view class="page opinion" :class="{'page-bottom-bar': isShow}">
			<view class="font-323232 font-b">
				<text class="font15">评分</text>
				<text class="font11">(期待您的五星好评)</text>
			</view>
			<view class="opinion_rate flex-row-start">
				<uni-rate class="rate" v-model="form.item_avg" activeColor="#ff6428" size="20" @change="onRate"/>
				<view class="font15">{{form.item_avg}}分</view>
			</view>
			<view class="font-323232 font15 font-b">评价</view>
			<textarea class="opinion_edit font14 font-1e1e1e" :value="form.content" @input="Ontextarea" placeholder-class="placeholderClass" placeholder="请输入5-200字以内的评价" maxlength="200" />
			<view class="font-323232 font-b">
				<text class="font15">打标签</text>
				<text class="font11">(选填，可多选)</text>
			</view>
			<view class="tags-box">
				<uni-data-checkbox mode="tag" :selectedColor="themeColor" :multiple="true" :value="tags" :localdata="tagsArr" @change="tagChange"></uni-data-checkbox>
			</view>
			<view class="font-323232 font-b">
				<text class="font15">添加图片</text>
				<text class="font11">(选填，最多上传3张图片)</text>
			</view>
			<view class="opinion_upload">
				<Comupload ref="Comupload" :options="uploadObj" @callback="chooseImg" @toggle="onToggle"></Comupload>
			</view>
		</view>
		<!-- 按钮 -->
		<view v-if="isShow" class="fix-bottom-btn flex-row-center">
			<view class="btn flex-row-center font-ffffff font15" @click="submit">提交评论</view>
		</view>
	</view>
</template>

<script>
	import Comupload from '@/components/j-Comupload/index.vue';
	export default {
		components: { Comupload },
		data() {
			return {
				themeColor: '#03004c',
				isShow: true, // 提交按钮是否显示
				uploadObj: {
					max: 3, // 最多上传多少图片
					height: 160, // 图片显示的高
					width: 160, // 图片显示的宽
					radius: 6, // 图片圆角
					top: 0, // 图片头部距离
					bottom: 20, // 图片底部距离
					right: 40, // 图片右边距离
					num: 3, // 一行显示几张图片
					slot: false // 是否自定义上传样式
				},
				uploadList: [], // 图片组
				desc: '', //评价
				tags: [], // 选中的标签
				tagsArr: [
					{"value": 0,"text": "服务好"},
					{"value": 1,"text": "环境好"},
					{"value": 2,"text": "舒适度"},
					{"value": 3,"text": "采光好"},
				],
				form: {
					order_id: '',
					content: '',
					tag: '',
					item_avg: 5,
					img: ''
				}
			}
		},
		onLoad (options) {
			this.form.order_id = options.orderId
			
			this.$Http({
				url: 'setHotelComment',
				token: true,
				load: true
			}).then(res => {
				if (res.code == 1) {
					let $arr = []
					res.data.forEach((item)=>{
						$arr.push({
							value: item.id,
							text: item.name
						})
					})
					this.tagsArr = $arr
				}
			})
		},
		methods: {
			onRate(e) {
				this.form.item_avg = e.value
			},
			// 意见
			Ontextarea(e) {
				this.form.content = e.detail.value
			},
			// 复选框
			tagChange(e){
				this.tags = e.detail.value
			},
			// 上传图片组
			chooseImg(e) {
				this.uploadList = e
			},
			onToggle (e) {
				this.isShow = !e.show
			},
			// 提交
			submit () {
				if (this.form.content == '') {
					uni.showToast({title: '请输入您的评价', icon: 'none'})
					return false
				}
				this.form.tag = this.tags.join(',')
				this.form.img = this.uploadList.join(',')
				this.$Http({
					url: 'setHotelComment',
					type: 'POST',
					token: true,
					load: true,
					data: this.form
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({  title: '评价成功' });
						setTimeout(()=>{
							uni.reLaunch({ url: '/pages/my/commentList' });
						}, 2000)
					} else {
						uni.showToast({title: res.msg, icon: 'none'})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	/* 酒店评价 */
	.opinion{
		padding: 50rpx 35rpx;
		.opinion_rate{
			padding: 20rpx 0 30rpx;
			.rate{ margin-right: 10rpx; }
		}
		.opinion_edit{width: 680rpx;height: 300rpx;background-color: #f9f9f9;border-radius: 10rpx;padding: 30rpx;margin-top: 40rpx;margin-bottom: 60rpx;}
		.opinion_upload{width: 680rpx;padding-bottom: 24rpx;}
		.tags-box{padding: 30rpx 0 50rpx;}
	}
</style>
